<template>
	<view class="map">
		 <map id="maps" :style="{width: '100%',height: map_h}" :longitude="detail.lng" :latitude="detail.lat" :markers="markers" :controls="controls" :show-location="true"></map>
		 <button @click="getNew">开启导航</button>
		 <cover-view class="get-local df df-justify-content-alin" @click="getNew">
			<cover-image :src="dw" style="width: 75%;height: 75%"></cover-image>
		 </cover-view>
		 <cover-view class="station-name df df-justify-content-between df-align-items">
			 <cover-view>{{detail.name}}</cover-view>
			<cover-image src="@/static/map/dh.png" style="width: 100rpx;height: 100rpx;margin-right: 30rpx" @tap="goToHere"></cover-image>
		 </cover-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dw: require('@/static/map/def_dw.png'),
				map_h: '',
				detail: {},
				markers: [{
					id: 1,
					latitude: '',
					longitude: '',
					title: '',
					callout:{
						content:'',
						display: 'ALWAYS',
						padding: 10,
						borderRadius: 5,
						fontSize: 14
					}
					// width: 120,
					// height: 180
				}],
				controls: [],
				maps: ''
			}
		},
		onLoad(option) {
			this.detail = JSON.parse(decodeURIComponent(option.item))
			this.markers[0].latitude = this.detail.lat
			this.markers[0].longitude = this.detail.lng
			this.markers[0].title = this.detail.name
			this.markers[0].callout.content=this.detail.name
			// this.markers[0].latitude = this.detail.lng
			this.maps = uni.createMapContext('maps',this)
			uni.getSystemInfo({
				success:(res)=>{
					this.map_h = res.screenHeight+'px'
					this.controls = [{
						id: 0,
						position:{
							width: 50,
							height: 50,
							left: 100,
							top: res.screenHeight-100
						},
						iconPath: './../../static/mine/q@2x.png',
						clickable: true
					}]
				}
			})
			
		},
		methods:{
			// {
			// 	latitude: _this.detail.lat,
			// 	longitude: _this.detail.lng
			// }
			goToHere(){
				let _this = this;
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        // const latitude = res.latitude;
				        // const longitude = res.longitude;
				        uni.openLocation({
				            latitude: Number(_this.detail.lat),
				            longitude: Number(_this.detail.lng),
				            success: function () {
				                // console.log('success');
				            },
							complete: (e)=>{
								// console.log('e',e);
							}
							
				        });
				    }
				});
				// this.maps.openMapApp({
				// 	com
				// })
			},
			// openMapApp(e){
			// 	console.log(e)
			// },
			getNew(){
				this.maps.moveToLocation({
					success:()=>{
						this.dw = require('@/static/map/act_dw.png')
					}
				})
			}
		}
	}
</script>

<style>
	.station-name{
		width: 100%;
		height: 150rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		/* padding: 30rpx 30rpx 0 30rpx; */
		box-sizing: border-box;
	}
	.get-local{
		width: 90rpx;
		height: 90rpx;
		background: #fff;
		border-radius: 50%;
		position: fixed;
		right: 35rpx;
		bottom: 200rpx;
	}
</style>
